import { defineComponent, reactive, ref, inject, h, nextTick, computed } from 'vue'
import CommentAll from './components/CommentAll'
import {
  NCollapseItem,
  NInput,
  NInputNumber,
  NButton,
  NSwitch,
  NSelect,
  NButtonGroup,
  NSpace,
  NInputGroup,
  NDataTable,
  NDropdown,
  NDrawer,
  NDrawerContent,
  NForm,
  NFormItem,
  NRadioGroup,
  NRadio
} from 'naive-ui'
import type { DataTableColumns, FormInst } from 'naive-ui'
import type { PropType, Ref } from 'vue'
import type { questionSideListState } from '@/types/baseConfig'
import dictionaryApi from '@/service/api/dictionary'
import type { addQueryState } from '@/types/form'
import dataTypeEnum from '@/enum/dataTypeEnum'

const AddParams = defineComponent({
  emits: ['save'],
  setup: function (props, { emit, expose }) {
    const $clone = inject('$clone') as <T>(data: T) => T
    const questions = inject('questions') as Ref<questionSideListState[]>
    const formRef = ref<FormInst | null>(null)
    const queryForm = ref<addQueryState>({
      key: '',
      isItem: false,
      dataType: 'string',
      value: ''
    })
    const rules = {
      key: {
        required: true,
        message: '请选择key',
        trigger: ['input']
      },
      value: {
        required: true,
        message: '请输入或选择值',
        trigger: ['input']
      }
    }
    const handSave = () => {
      formRef.value?.validate(errors => {
        if (errors) {
          return
        }
        emit('save', queryForm.value)
        close()
      })
    }

    const setDefaultValue = () => {
      if (queryForm.value.dataType === 'number') {
        queryForm.value.value = 0
      } else if (queryForm.value.dataType === 'boolean') {
        queryForm.value.value = false
      } else {
        queryForm.value.value = ''
      }
    }
    const show = ref(false)
    const title = ref('添加请求参数')
    const close = () => {
      show.value = false
    }
    const open = (e?: addQueryState) => {
      if (e) {
        title.value = '编辑请求参数'
        queryForm.value = e
      } else {
        title.value = '添加请求参数'
        queryForm.value = {
          key: '',
          isItem: false,
          dataType: 'string',
          value: ''
        }
      }
      console.log(questions.value)
      show.value = true
    }

    const options = computed(() => {
      return $clone(questions.value).map((el: questionSideListState) => {
        return {
          labelName: el.commonForm.labelName,
          labelKey: el.commonForm.labelKey
        }
      })
    })

    expose({
      open
    })
    return () => (
      <>
        <NDrawer v-model:show={show.value} width={400}>
          <NDrawerContent title={title.value}>
            <NForm ref={formRef} model={queryForm.value} rules={rules}>
              <NFormItem label="请求key" path="key">
                <NInput
                  class="w-full"
                  v-model:value={queryForm.value.key}
                  clearable
                  placeholder="请输入请求key"
                />
              </NFormItem>
              <NFormItem label="本表字段">
                <NSwitch v-model:value={queryForm.value.isItem} />
              </NFormItem>
              {queryForm.value.isItem ? (
                <NFormItem label="值" path="value">
                  <NSelect
                    v-model:value={queryForm.value.value}
                    options={options.value}
                    labelField="labelName"
                    valueField="labelKey"
                    placeholder="请选择"
                    onUpdateValue={setDefaultValue}
                  />
                </NFormItem>
              ) : (
                <>
                  <NFormItem label="数据类型" path="dataType">
                    <NSelect
                      v-model:value={queryForm.value.dataType}
                      options={dataTypeEnum}
                      placeholder="请选择"
                      onUpdateValue={setDefaultValue}
                    />
                  </NFormItem>
                  <NFormItem label="值">
                    {queryForm.value.dataType === 'number' ? (
                      <NInputNumber
                        class="w-full"
                        v-model:value={queryForm.value.value}
                        clearable
                        placeholder="请输入值"
                      />
                    ) : queryForm.value.dataType === 'boolean' ? (
                      <NSwitch v-model:value={queryForm.value.value} />
                    ) : (
                      <NInput v-model:value={queryForm.value.value} placeholder="请输入值" />
                    )}
                  </NFormItem>
                </>
              )}
              <NFormItem>
                <div class="w-full flex justify-end">
                  <NButton type="primary" onClick={handSave}>
                    保存
                  </NButton>
                </div>
              </NFormItem>
            </NForm>
          </NDrawerContent>
        </NDrawer>
      </>
    )
  }
})

export default defineComponent({
  name: 'SelectInput',
  props: {
    compData: {
      type: Object as PropType<questionSideListState>,
      default: () => {
        return {}
      }
    }
  },
  emits: ['save'],
  setup: function (props, { emit }) {
    const $clone = inject('$clone') as <T>(data: T) => T
    const questions = inject('questions') as Ref<questionSideListState[]>
    const handOptionsInfoChange = inject('handOptionsInfoChange') as () => void
    const handSave = (e: questionSideListState) => {
      emit('save', e)
    }
    const setRes = (info: questionSideListState, e: 'maxTagCount', handOptions: () => void) => {
      if (info.SelectInputForm) info.SelectInputForm[e] = null
      setTimeout(() => {
        if (info.SelectInputForm) info.SelectInputForm[e] = 'responsive'
      }, 80)
      handOptions()
    }
    const setMax = (info: questionSideListState, e: 'maxTagCount', handOptions: () => void) => {
      if (info.SelectInputForm) info.SelectInputForm[e] = 1
      handOptions()
    }
    const setNull = (
      info: questionSideListState,
      e:
        | 'consistentMenuWidth'
        | 'childrenField'
        | 'clearFilterAfterSelect'
        | 'ignoreComposition'
        | 'keyboard'
        | 'labelField'
        | 'valueField'
        | 'maxTagCount'
        | 'multiple'
        | 'remote',
      handOptions: () => void
    ) => {
      if (info.SelectInputForm) info.SelectInputForm[e] = null
      setTimeout(() => {
        if (info.SelectInputForm) delete info.SelectInputForm[e]
      }, 80)
      handOptions()
    }

    const loadingChange = (
      e: questionSideListState,
      status: boolean | undefined,
      handOptions: () => void
    ) => {
      if (e.SelectInputForm) {
        e.SelectInputForm.loading = status
      }
      handOptions()
    }

    const handTypeKeyChange = (handOptions: () => void) => {
      handOptionsInfoChange()
      handOptions()
    }

    const placementOptions = [
      {
        label: 'top-start',
        value: 'top-start'
      },
      {
        label: 'top',
        value: 'top'
      },
      {
        label: 'top-end',
        value: 'top-end'
      },
      {
        label: 'right-start',
        value: 'right-start'
      },
      {
        label: 'right',
        value: 'right'
      },
      {
        label: 'right-end',
        value: 'right-end'
      },
      {
        label: 'bottom-start',
        value: 'bottom-start'
      },
      {
        label: 'bottom',
        value: 'bottom'
      },
      {
        label: 'bottom-end',
        value: 'bottom-end'
      },
      {
        label: 'left-start',
        value: 'left-start'
      },
      {
        label: 'left',
        value: 'left'
      },
      {
        label: 'left-end',
        value: 'left-end'
      }
    ]

    const methodOptions = [
      {
        label: 'get',
        value: 'get'
      },
      {
        label: 'post',
        value: 'post'
      }
    ]

    const optionsInfo = reactive({
      fromData: []
    })
    const getOptions = async () => {
      const { data } = await dictionaryApi.list({})
      optionsInfo.fromData = data
    }
    getOptions()

    /**
     *  参数
     * */
    const x = ref(0)
    const y = ref(0)
    const rowProps = (rowData: addQueryState, rowIndex: number) => {
      return {
        onContextmenu: (e: MouseEvent) => {
          oldIndex = rowIndex
          e.preventDefault()
          showDropdown.value = false
          nextTick(() => {
            showDropdown.value = true
            x.value = e.clientX
            y.value = e.clientY
          })
        }
      }
    }
    const showDropdown = ref(false)
    const options = [
      {
        label: '编辑',
        key: 'edit'
      },
      {
        label: () => h('span', { style: { color: 'red' } }, '删除'),
        key: 'delete'
      }
    ]
    const handleSelect = (info: questionSideListState, e: string, handOptions: () => void) => {
      if (info.SelectInputForm) {
        const rowInfo = info.SelectInputForm.queryForm[oldIndex]
        if (e === 'edit') {
          addRef.value.open($clone(rowInfo))
        } else if (e === 'delete') {
          info.SelectInputForm.queryForm.splice(oldIndex, 1)
          handOptions()
        }
      }
      showDropdown.value = false
    }
    const getName = (key: string) => {
      let name = ''
      try {
        const getChilder = (arr: questionSideListState[]) => {
          arr.forEach((el: questionSideListState) => {
            if (el.commonForm.labelKey === key) {
              throw new Error(el.commonForm.labelName)
            }
            if (el?.RowLayoutForm) {
              if (el.RowLayoutForm.childer && el.RowLayoutForm.childer.length > 0) {
                getChilder(el.RowLayoutForm.childer)
              }
            }
          })
        }
        questions.value.forEach((el: questionSideListState) => {
          if (el.commonForm.labelKey === key) {
            throw new Error(el.commonForm.labelName)
          }
          if (el?.RowLayoutForm) {
            if (el.RowLayoutForm.childer && el.RowLayoutForm.childer.length > 0) {
              getChilder(el.RowLayoutForm.childer)
            }
          }
        })
      } catch (e) {
        name = (e as Error).message
      }
      return name || key
    }
    const columns: DataTableColumns = [
      {
        title: 'Key',
        key: 'key',
        width: 80,
        ellipsis: true,
        render(row: any) {
          return [
            h(
              'span',
              {},
              {
                default: () => getName(row.key)
              }
            )
          ]
        }
      },
      {
        title: '值',
        key: 'value',
        render(row: any) {
          return [
            h(
              'span',
              {},
              {
                default: () => row.value
              }
            )
          ]
        }
      }
    ]
    const addRef = ref()
    let oldIndex = -1
    const handAddParams = (info: questionSideListState, index: number) => {
      if (info.SelectInputForm) {
        oldIndex = index
        if (index === -1) {
          addRef.value.open()
        } else {
          const row: addQueryState = info.SelectInputForm.queryForm[index]
          addRef.value.open(row || null)
        }
      }
    }
    const paramsSave = (info: questionSideListState, e: addQueryState, handOptions: () => void) => {
      if (info.SelectInputForm) {
        if (oldIndex === -1) {
          if (!info.SelectInputForm?.queryForm) {
            info.SelectInputForm.queryForm = [e]
          } else {
            info.SelectInputForm.queryForm.push(e)
          }
        } else {
          info.SelectInputForm.queryForm[oldIndex] = e
        }
      }
      handOptions()
    }
    return () => (
      <>
        <CommentAll
          comp-data={props.compData}
          onSave={handSave}
          v-slots={{
            default: ({
              info,
              handSetting,
              handOptions
            }: {
              info: questionSideListState
              handOptions: () => void
              handSetting: (labelKey: string) => void
            }) => (
              <NCollapseItem
                name="rowParams"
                v-slots={{
                  header: () => (
                    <div class="cell flex item">
                      <div class="title u-line-1">选择器属性</div>
                    </div>
                  ),
                  default: () => (
                    <>
                      {info.SelectInputForm && (
                        <>
                          <div>
                            <div class="settingItemTitle">提示语句</div>
                            <div class="edit-input">
                              <NInput
                                v-model:value={info.SelectInputForm.placeholder}
                                placeholder="请输入placeholder"
                                clearable
                                onBlur={handOptions}
                              />
                            </div>
                          </div>
                          <div class="mt-5">
                            <div class="settingItemTitle">
                              是否要异步获取选项。注意如果设定了，那么 filter 和 tag 都不会对
                              options 生效。这个时候你在全权控制 options
                            </div>
                            <div class="mt-[10px] flex items-center">
                              <NButton
                                size="small"
                                type={
                                  info.SelectInputForm.remote === undefined ? 'primary' : 'default'
                                }
                                onClick={() => setNull(info, 'remote', handOptions)}
                              >
                                <span>空</span>
                              </NButton>
                              <div class="flex-1 ml-[5px]">
                                <NSwitch
                                  v-model:value={info.SelectInputForm.remote}
                                  onUpdateValue={handOptions}
                                />
                              </div>
                            </div>
                          </div>
                          {info.SelectInputForm.remote ? (
                            <>
                              <div class="mt-[20px]">
                                <div class="settingItemTitle">搜索key</div>
                                <div class="edit-input">
                                  <NInput
                                    v-model:value={info.SelectInputForm.query}
                                    placeholder="请输入搜索key"
                                    clearable
                                    onBlur={handOptions}
                                  />
                                </div>
                              </div>
                            </>
                          ) : (
                            <>
                              <div class="mt-[20px]">
                                <div class="settingItemTitle">数据来源方式</div>
                                <div class="edit-input">
                                  <NRadioGroup
                                    v-model:value={info.SelectInputForm.fromType}
                                    onUpdateValue={handOptions}
                                  >
                                    <NSpace>
                                      <NRadio value="common">字典</NRadio>
                                      <NRadio value="interface">接口</NRadio>
                                    </NSpace>
                                  </NRadioGroup>
                                </div>
                              </div>
                              {info.SelectInputForm.fromType === 'common' && (
                                <div class="mt-[20px]">
                                  <div class="settingItemTitle">数据来源</div>
                                  <div class="edit-input">
                                    <NSelect
                                      v-model:value={info.SelectInputForm.fromTypeKey}
                                      labelField="name"
                                      valueField="typeKey"
                                      options={optionsInfo.fromData}
                                      placeholder="请选择"
                                      onUpdateValue={() => handTypeKeyChange(handOptions)}
                                    />
                                  </div>
                                </div>
                              )}
                            </>
                          )}
                          {(info.SelectInputForm.remote ||
                            info.SelectInputForm.fromType === 'interface') && (
                            <>
                              <div class="mt-[20px]">
                                <div class="settingItemTitle">远程数据接口</div>
                                <div class="edit-input">
                                  <NSpace vertical>
                                    <NInputGroup>
                                      <NSelect
                                        v-model:value={info.SelectInputForm.getOptionsConfig.method}
                                        options={methodOptions}
                                        placeholder="请求方式"
                                        style={{ width: '100px' }}
                                        onUpdateShow={handOptions}
                                      />
                                      <NInput
                                        v-model:value={info.SelectInputForm.getOptionsConfig.api}
                                        placeholder="请输入"
                                        clearable
                                        onBlur={handOptions}
                                      />
                                    </NInputGroup>
                                  </NSpace>
                                </div>
                              </div>
                              <div class="mt-[20px]">
                                <div class="settingItemTitle">请求参数</div>
                                <div class="mt-[10px]">
                                  <NDataTable
                                    columns={columns}
                                    data={info.SelectInputForm.queryForm}
                                    rowProps={rowProps}
                                  />
                                  <div class="mt-[10px] flex justify-end">
                                    <NButton round onClick={() => handAddParams(info, -1)}>
                                      新增
                                    </NButton>
                                  </div>
                                </div>
                              </div>
                            </>
                          )}
                          <div class="mt-[20px]">
                            <div class="settingItemTitle">菜单的弹出位置</div>
                            <div class="edit-input">
                              <NSelect
                                v-model:value={info.SelectInputForm.placement}
                                options={placementOptions}
                                placeholder="请选择"
                                onUpdateValue={handOptions}
                              />
                            </div>
                          </div>
                          <div class="mt-5">
                            <div class="settingItemTitle">
                              菜单宽度是否和选择触发器一致，设为 false 会使 virtual-scroll 失效
                            </div>
                            <div class="mt-[10px] flex items-center">
                              <NButton
                                size="small"
                                type={
                                  info.SelectInputForm.consistentMenuWidth === undefined
                                    ? 'primary'
                                    : 'default'
                                }
                                onClick={() => setNull(info, 'consistentMenuWidth', handOptions)}
                              >
                                <span>空</span>
                              </NButton>
                              <div class="flex-1 ml-[5px]">
                                <NSwitch
                                  v-model:value={info.SelectInputForm.consistentMenuWidth}
                                  onUpdateValue={handOptions}
                                />
                              </div>
                            </div>
                          </div>
                          <div class="mt-5">
                            <div class="settingItemTitle">label-field</div>
                            <div class="mt-[10px] flex items-center">
                              <NButton
                                size="small"
                                type={
                                  info.SelectInputForm.labelField === undefined
                                    ? 'primary'
                                    : 'default'
                                }
                                onClick={() => setNull(info, 'labelField', handOptions)}
                              >
                                <span>空</span>
                              </NButton>
                              <div class="flex-1 ml-[5px]">
                                <NInput
                                  v-model:value={info.SelectInputForm.labelField}
                                  placeholder="默认值: label"
                                  clearable
                                  onBlur={handOptions}
                                />
                              </div>
                            </div>
                          </div>
                          <div class="mt-5">
                            <div class="settingItemTitle">value-field</div>
                            <div class="mt-[10px] flex items-center">
                              <NButton
                                size="small"
                                type={
                                  info.SelectInputForm.valueField === undefined
                                    ? 'primary'
                                    : 'default'
                                }
                                onClick={() => setNull(info, 'valueField', handOptions)}
                              >
                                <span>空</span>
                              </NButton>
                              <div class="flex-1 ml-[5px]">
                                <NInput
                                  v-model:value={info.SelectInputForm.valueField}
                                  placeholder="默认值: value"
                                  clearable
                                  onBlur={handOptions}
                                />
                              </div>
                            </div>
                          </div>
                          <div class="mt-5">
                            <div class="settingItemTitle">选项组 children 的字段名</div>
                            <div class="mt-[10px] flex items-center">
                              <NButton
                                size="small"
                                type={
                                  info.SelectInputForm.childrenField === undefined
                                    ? 'primary'
                                    : 'default'
                                }
                                onClick={() => setNull(info, 'childrenField', handOptions)}
                              >
                                <span>空</span>
                              </NButton>
                              <div class="flex-1 ml-[5px]">
                                <NInput
                                  v-model:value={info.SelectInputForm.childrenField}
                                  placeholder="默认值: children"
                                  clearable
                                  onBlur={handOptions}
                                />
                              </div>
                            </div>
                          </div>
                          <div class="mt-[20px] flex items-center">
                            <div class="settingItemTitle">是否可清空</div>
                            <div class="flex-1 ml-[5px]">
                              <NSwitch
                                v-model:value={info.SelectInputForm.clearable}
                                onUpdateValue={handOptions}
                              />
                            </div>
                          </div>
                          <div class="mt-[20px] flex items-center">
                            <div class="settingItemTitle">是否可以过滤</div>
                            <div class="flex-1 ml-[5px]">
                              <NSwitch
                                v-model:value={info.SelectInputForm.filterable}
                                onUpdateValue={handOptions}
                              />
                            </div>
                          </div>
                          {info.SelectInputForm.filterable && (
                            <div class="mt-[20px] flex items-center">
                              <div class="settingItemTitle">过滤器函数</div>
                              <div class="flex-1 ml-[5px]">
                                <NButton
                                  round
                                  size="small"
                                  onClick={() => handSetting('SelectInputForm.filter')}
                                >
                                  去设置
                                </NButton>
                              </div>
                            </div>
                          )}
                          <div class="mt-5">
                            <div class="settingItemTitle">
                              是否在可过滤和多选的情况下选中一个选项后保留当前的搜索关键词
                            </div>
                            <div class="mt-[10px] flex items-center">
                              <NButton
                                size="small"
                                type={
                                  info.SelectInputForm.clearFilterAfterSelect === undefined
                                    ? 'primary'
                                    : 'default'
                                }
                                onClick={() => setNull(info, 'clearFilterAfterSelect', handOptions)}
                              >
                                <span>空</span>
                              </NButton>
                              <div class="flex-1 ml-[5px]">
                                <NSwitch
                                  v-model:value={info.SelectInputForm.clearFilterAfterSelect}
                                  onUpdateValue={handOptions}
                                />
                              </div>
                            </div>
                          </div>
                          <div class="mt-5">
                            <div class="settingItemTitle">
                              忽略输入法 Composition 状态，默认情况下 filter
                              在输入法输入的过程中不会触发
                            </div>
                            <div class="mt-[10px] flex items-center">
                              <NButton
                                size="small"
                                type={
                                  info.SelectInputForm.ignoreComposition === undefined
                                    ? 'primary'
                                    : 'default'
                                }
                                onClick={() => setNull(info, 'ignoreComposition', handOptions)}
                              >
                                <span>空</span>
                              </NButton>
                              <div class="flex-1 ml-[5px]">
                                <NSwitch
                                  v-model:value={info.SelectInputForm.ignoreComposition}
                                  onUpdateValue={handOptions}
                                />
                              </div>
                            </div>
                          </div>
                          <div class="mt-5">
                            <div class="settingItemTitle">是否为多选</div>
                            <div class="mt-[10px] flex items-center">
                              <NButton
                                size="small"
                                type={
                                  info.SelectInputForm.multiple === undefined
                                    ? 'primary'
                                    : 'default'
                                }
                                onClick={() => setNull(info, 'multiple', handOptions)}
                              >
                                <span>空</span>
                              </NButton>
                              <div class="flex-1 ml-[5px]">
                                <NSwitch
                                  v-model:value={info.SelectInputForm.multiple}
                                  onUpdateValue={handOptions}
                                />
                              </div>
                            </div>
                          </div>
                          <div class="mt-5">
                            <div class="settingItemTitle">是否支持键盘操作</div>
                            <div class="mt-[10px] flex items-center">
                              <NButton
                                size="small"
                                type={
                                  info.SelectInputForm.keyboard === undefined
                                    ? 'primary'
                                    : 'default'
                                }
                                onClick={() => setNull(info, 'keyboard', handOptions)}
                              >
                                <span>空</span>
                              </NButton>
                              <div class="flex-1 ml-[5px]">
                                <NSwitch
                                  v-model:value={info.SelectInputForm.keyboard}
                                  onUpdateValue={handOptions}
                                />
                              </div>
                            </div>
                          </div>
                          <div class="mt-5">
                            <div class="settingItemTitle">
                              多选标签的最大显示数量，responsive 会将所有标签保持在一行
                            </div>
                            <div class="mt-[10px]">
                              <NButtonGroup>
                                <NButton
                                  type={
                                    info.SelectInputForm.maxTagCount === undefined
                                      ? 'primary'
                                      : 'default'
                                  }
                                  round
                                  onClick={() => setNull(info, 'maxTagCount', handOptions)}
                                >
                                  <span>空</span>
                                </NButton>
                                <NButton
                                  type={
                                    info.SelectInputForm.maxTagCount === 'responsive'
                                      ? 'primary'
                                      : 'default'
                                  }
                                  round
                                  onClick={() => setRes(info, 'maxTagCount', handOptions)}
                                >
                                  <span>responsive</span>
                                </NButton>
                                <NButton
                                  type={
                                    info.SelectInputForm.maxTagCount !== undefined &&
                                    info.SelectInputForm.maxTagCount !== null &&
                                    info.SelectInputForm.maxTagCount !== 'responsive'
                                      ? 'primary'
                                      : 'default'
                                  }
                                  round
                                  onClick={() => setMax(info, 'maxTagCount', handOptions)}
                                >
                                  <span>数量</span>
                                </NButton>
                              </NButtonGroup>
                            </div>
                            {info.SelectInputForm.maxTagCount !== undefined &&
                              info.SelectInputForm.maxTagCount !== null &&
                              info.SelectInputForm.maxTagCount !== 'responsive' && (
                                <div class="mt-[5px]">
                                  <NInputNumber
                                    v-model:value={info.SelectInputForm.maxTagCount}
                                    placeholder="请输入"
                                    clearable
                                    onBlur={handOptions}
                                  />
                                </div>
                              )}
                          </div>
                          <div class="mt-[20px]">
                            <div class="settingItemTitle">是否展示加载图标</div>
                            <div class="edit-input">
                              <NButtonGroup>
                                <NButton
                                  type={
                                    info.SelectInputForm.loading === true ? 'primary' : 'default'
                                  }
                                  round
                                  onClick={() => loadingChange(info, true, handOptions)}
                                >
                                  <span>展示</span>
                                </NButton>
                                <NButton
                                  type={
                                    info.SelectInputForm.loading === false ? 'primary' : 'default'
                                  }
                                  round
                                  onClick={() => loadingChange(info, false, handOptions)}
                                >
                                  <span>不展示(占位)</span>
                                </NButton>
                                <NButton
                                  type={
                                    info.SelectInputForm.loading === undefined
                                      ? 'primary'
                                      : 'default'
                                  }
                                  round
                                  onClick={() => loadingChange(info, undefined, handOptions)}
                                >
                                  <span>不展示(不占位)</span>
                                </NButton>
                              </NButtonGroup>
                            </div>
                          </div>
                          <NDropdown
                            placement="bottom-start"
                            trigger="manual"
                            x={x.value}
                            y={y.value}
                            options={options}
                            show={showDropdown.value}
                            onSelect={(e: string) => handleSelect(info, e, handOptions)}
                          />
                          <AddParams
                            ref={addRef}
                            onSave={(e: addQueryState) => paramsSave(info, e, handOptions)}
                          />
                        </>
                      )}
                    </>
                  )
                }}
              />
            )
          }}
        />
      </>
    )
  }
})
